import styled from 'styled-components'
import prevPic from '@img/btn-prev-calendar.png'
import nextPic from '@img/btn-next-calendar.png'
import { StyledMediaContainer } from '@/style/global'
/*
父元素
display: flex;


.right-wrap{
	flex-shrink: 0;
}


------------------------------
flex-shrink:0
当指定view为flex布局后，给子元素定义width是不起效果的。

原因：定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性是什么意思呢？

就是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，

这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。
当flex-shrink设置为0时，表示大家都不缩小适应。


所以，倘若给父元素设置了flex布局后，若要其子元素的width有效果，必须给子元素设置flex-shrink为0。
*/
export const StyledWrap = styled(StyledMediaContainer)`
	display: flex;
	.right-wrap {
		width: 180px;
		flex-shrink: 0;
		.title {
			color: #005e59;
			font-size: 18px;
			padding: 35px 0 20px;
		}
		.date-panel {
			padding-top: 10px;
			width: 168px;
			font-size: 12px;
			.panel-title {
				display: flex;
				.date-title {
					width: 24px;
					height: 18px;
					padding: 0 3px;
				}
			}
			.panel-date {
				display: flex;
				flex-wrap: wrap;
				.date-item {
					width: 24px;
					height: 18px;
					cursor: pointer;
					padding: 0 3px;
					margin: 2px 0;
					&.isOtherMonth {
						color: #aaaaaa;
					}
					&.isCurWeek {
						background: #efefef;
					}
					&.isCurDay {
						background: #8595a5;
						color: #ffffff;
					}
					&:hover {
						background: #8595a5;
						color: #ffffff;
					}
				}
			}
		}
		.meeting-category {
			margin-top: 20px;
			.category-title {
				font-size: 15px;
				margin-bottom: 5px;
			}
			.category {
				font-size: 13px;
				padding: 3px 0;
				.icon {
					display: inline-block;
					width: 10px;
					height: 10px;
					margin-right: 5px;
					&.mine {
						background-color: rgb(142, 167, 214);
					}
					&.participate {
						background-color: rgb(147, 184, 117);
					}
					&.not-approved {
						background-color: #ffa5b3;
					}
					&.approving {
						background-color: #ffdf4d;
					}
					&.expired {
						background-color: rgb(193, 200, 203);
					}
				}
			}
		}
	}
	.left-wrap {
		position: relative;
		top: -25px;
		width: 1467px;
		.day-picker {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 25px;
			.text {
				padding: 0 5px;
				font-size: 14px;
			}
		}
	}
`
export const PrevIcon = styled.div`
	display: inline-block;
	height: 29px;
	width: 35px;
	cursor: pointer;
	background: url(${prevPic});
`
export const NextIcon = styled.div`
	display: inline-block;
	height: 29px;
	width: 35px;
	cursor: pointer;
	background: url(${nextPic});
`
